<script lang="jsx" setup>
import { message } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { get, post } from '@/service/api/api';
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => false
  },
  currentInk: {
    type: Array,
    default: []
  }
});
const emit = defineEmits(['addModalClose', 'updateSuccess']);
const modelVisible = ref(props.visible);
const modleAddLoading = ref(false);

const mockData = ref([]);

const oriTargetKeys = ref([]);
const targetKeys = ref(oriTargetKeys);
const selectedKeys = ref([]);

function getOilList() {
  get('/rcerp/agv/erp/findOil', {}).then(({ data, error }) => {
    console.log('data :>> ', data);
    if (!error) {
      mockData.value = data?.map(item => {
        return {
          value: item.value,
          label: item.value,
          key: item.value,
          title: item.value
        };
      });
    }
  });
}

function handleOk() {
  modleAddLoading.value = true;
  post('/qms/single/singleUvSolderSilk/updateSingleOil', targetKeys.value)
    .then(({ data, error }) => {
      if (!error) {
        message.success('修改油墨成功');
        emit('updateSuccess');
      }
    })
    .finally(() => (modleAddLoading.value = false));
}

function handleClose() {
  modelVisible.value = false;
  emit('addModalClose');
}

watch(
  () => props.visible,
  val => {
    modelVisible.value = val;
    if (val) {
      getOilList();
      targetKeys.value = props.currentInk.map(item => item.value);
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <Modal
    v-model:visible="modelVisible"
    title="修改候选油墨"
    height="70vh"
    width="70vw"
    :destroy-on-close="true"
    :centered="true"
    @close="handleClose"
  >
    <div class="h-full w-full">
      <ATransfer
        v-model:target-keys="targetKeys"
        v-model:selected-keys="selectedKeys"
        :data-source="mockData"
        :titles="['所有的油墨', '已添加的油墨']"
        :operations="['添加', '移除']"
        :render="item => item.title"
        class="my-transfer h-full w-full"
      />
    </div>

    <template #footer>
      <div class="modal-footer">
        <AButton type="primary" :loading="modleAddLoading" @click="handleOk">修 改</AButton>
        <AButton @click="handleClose">关 闭</AButton>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss">
.my-transfer {
  justify-content: center;
  .ant-transfer-operation {
    width: 100px;
  }
  .ant-transfer-list {
    width: calc(40% - 110px);
    height: 100%;
  }
}
</style>
